<template>
	<view>

		<view class="cu-list menu" :class="['card-menu margin-top']" v-for="(item, index) in payment" :key="index" @click="checkAddress(item)">
			<view class="cu-item  ">
				<view class="content">

					<image src="../../static/zfb.png" class="png" mode="aspectFit" v-if="item.type==1"></image>
					<image src="../../static/wx.png" class="png" mode="aspectFit" v-if="item.type==2"></image>
					<image src="../../static/yh.png" class="png" mode="aspectFit" v-if="item.type==3"></image>
					<text class="text-grey">{{item.type_text}}</text>
				</view>
				<view class="action">
					 <!-- <button class="cu-btn bg-orange round" v-if="item.is_default == 1">默认</button> -->
					<switch @change="switchChange($event,item)" :class="item.is_default == 1 ?'checked':''" :checked="item.is_default == 1"></switch>
				</view>
			</view>
			
			<view class="flex cu-item ">
				<view class="flex-treble " v-if="item.type <= 5">
					<view class="cu-item text-left">
						<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.account}}</text>
						<view style="margin-left: 9px;">
							<!-- <view class="text-content">{{item.address}}</view> -->
							<view class="text-lg row" style="word-break: break-word;" >{{item.address}}</view>
						</view>
					</view>
				</view>
				<view class="flex-treble " v-else>
					<view class="cu-item text-left">
						<text class="text-df nowrap" style="margin-left: 9px;">{{i18n.address2.bank}}</text>
						<view style="margin-left: 9px;">
							<!-- <view class="text-content">{{item.address}}</view> -->
							<view class="text-lg row" style="word-break: break-word;" >{{item.bank}}{{item.bank_card_no}}</view>
							<view class="text-lg row" style="word-break: break-word;" >{{item.username}}</view>
						</view>
					</view>
				</view>
				<view class="flex-sub ">
					<view class="cu-item text-right">
						<view style="line-height: 5;">
							<button class="cu-btn sm bg-yellow round" @tap="addAddress('edit', item)" data-target="bottomModal">{{i18n.address2.edit}}</button>
							 
						</view>
					
					</view>
				</view>
				<view class="flex-sub ">
					<view class="cu-item text-right">
						<view style="line-height: 5;"> 
							<button class="cu-btn sm bg-yellow round" @tap="delAddress(item)" data-target="bottomModal">{{i18n.address2.del}}</button>
						</view>
					
					</view>
				</view>
				<!-- <view class="flex-twice ">2</view> -->
				
			</view>
			 
		</view>

		<empty v-if="payment.length == 0"></empty>

		<view class="padding flex flex-direction add-btn">
			<button class="cu-btn bg-yellow lg" @click="addAddress('add')">{{i18n.address2.add}}</button>
		</view> 
	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from 'vuex'
	import empty from '@/components/empty.vue'
	export default {
		components: {
			empty
		},
		data() {
			return {
				source: 0,
				addressList: [], 
				option: {},
			}
		},
		onLoad(option) {
			uni.setNavigationBarTitle({
            	title: this.i18n.address2.title
        	});
			this.source = option.source;
			this.option = option
			this.getUserPayment()
		},
		computed: {
			...mapState({
				payment: state => state.user.payment
			}),
			i18n() {
				return this.$t('message');
			}
		},
		methods: {
			...mapActions(['getUserPayment']),
			checkAddress(item) {
				if (this.source == 1) {
					this.option.address_id = item.id
					uni.navigateTo({
						url: '/pages/order/createOrder?' + this.$tools.queryStringify(this.option)
					})
				}
			},
			addAddress(type, item) {
				console.log(item);
				uni.navigateTo({
					url: `/pages/address2/addressManage?type=${type}&data=${JSON.stringify(item)}`
				})
			},
			delAddress(item) {
				uni.showModal({
					title: this.i18n.popup.tips,
					content: this.i18n.popup.confirm3,
				    cancelText: this.i18n.popup.cancel,
					confirmText:this.i18n.popup.confirm,
					success: res => {
						if (res.confirm) {
							this.$http.post('user.payment.del', {
								payment_id: item.id
							}).then(res => {
								this.getUserPayment()
							})
						}
					}
				})
			},
			refreshList(data, type) {
				this.addressList.unshift(data);
			},
			switchChange(e,item) {
				console.log(e.detail.value)
				console.log(item.is_default)
				if(!item.is_default && e.detail.value){
					let send={
						id:item.id,
						is_default:1
					}
					this.$http.post('user.payment.edit2', send).then(res => {
						this.$api.msg(this.i18n.popup.success);
						this.getUserPayment()
						// setTimeout(() => {
						// 	this.$api.prePage()
						// }, 800)
					})
				}
				 
			},
		}
	}
</script>

<style lang='scss'>
	page {
		padding-bottom: 120upx;
	}

	.content {
		position: relative;
	}

	.list {
		display: flex;
		align-items: center;
		padding: 20upx 30upx;
		;
		/* background: #fff; */
		position: relative;
	}

	.wrapper {
		display: flex;
		flex-direction: column;
		flex: 1;
	}

	.address-box {
		display: flex;
		align-items: center;

		.tag {
			font-size: 24upx;
			color: $base-color;
			margin-right: 10upx;
			background: #fffafb;
			border: 1px solid #ffb4c7;
			border-radius: 4upx;
			padding: 4upx 10upx;
			line-height: 1;
		}

		.address {
			font-size: $font-base;
			color: $font-color-dark;
			flex: 1;
		}
	}

	.u-box {
		font-size: 28upx;
		color: $font-color-light;
		margin-top: 16upx;

		.name {
			margin-right: 30upx;
		}
	}

	.iconshanchu1 {
		display: flex;
		align-items: center;
		height: 80upx;
		font-size: 40upx;
		color: $font-color-light;
		padding-left: 30upx;
	}

	.add-btn {
		// position: fixed;
		left: 30upx;
		right: 30upx;
		bottom: 16upx;
		z-index: 95;
		display: flex;
	}

	.del-btn {
		color: #fa436a;
	}
</style>
